<template>
  <div class="collect-error-wrapper">
    <div class="practice-wrapper">
      <h3>我的练习</h3>
      <div
        class="chart-wrapper"
        v-for="(item, index) in tabList"
        :key="index"
        @click="toCollectOrError(item)"
        @mouseenter="index !== 2 && item.count > 0 && (item.visible = true)"
        @mouseleave="index !== 2 && item.count > 0 && (item.visible = false)"
      >
        <div class="item-icon">
          <el-icon size="28" :style="{ color: item.color }">
            <Component :is="item.icon" />
          </el-icon>
        </div>
        <div class="right">
          <div class="desc">{{ item.name }}</div>
          <span>（{{ item.count }}道）</span>
        </div>
        <el-icon
          v-if="item.visible"
          size="20"
          style="color: var(--el-color-danger); line-height: 60px"
          @click.stop="handleRemove(item)"
        >
          <Delete />
        </el-icon>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, shallowRef } from 'vue'
import Collect from '@/icons/Collect.vue'
import ErrorQuestion from '@/icons/ErrorQuestion.vue'
import EasyError from '@/icons/EasyError.vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import {
  httpCollectEasyErrorCount,
  httpRemoveAllCollectError,
} from '@/api/study'
// import { CollectOrError } from '@/enum/study'
const router = useRouter()
const tabList = ref([
  {
    id: 1,
    name: '我的收藏',
    icon: shallowRef(Collect),
    count: 0,
    color: 'orange',
    visible: false,
  },
  {
    id: 2,
    name: '我的错题本',
    icon: shallowRef(ErrorQuestion),
    count: 0,
    color: 'var(--el-color-danger)',
    visible: false,
  },
  {
    id: 3,
    name: '易错题',
    icon: shallowRef(EasyError),
    count: 0,
    color: 'var(--el-color-danger)',
    visible: false,
  },
])
const toCollectOrError = (params) => {
  const url = router.resolve({
    path: '/study/practice/' + params.id,
  })
  window.open(url.href, '_blank')
}

const handleRemove = (item) => {
  ElMessageBox.confirm(`确定要删除所有${item.name}吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      httpRemoveAllCollectError({
        type: item.id,
      })
    })
    .catch(() => {})
}
const allTotal = reactive({
  collect_count: 0,
  easy_mistake_count: 1,
  wrong_book_count: 0,
})
const getTotalCount = async () => {
  const res: any = await httpCollectEasyErrorCount()
  if (res) {
    let result = res.list[0]
    allTotal.collect_count = result.collect_count
    allTotal.easy_mistake_count = result.easy_mistake_count
    allTotal.wrong_book_count = result.wrong_book_count
    tabList.value[0].count = result.collect_count
    tabList.value[1].count = result.wrong_book_count
    tabList.value[2].count = result.easy_mistake_count
  }
}
getTotalCount()
</script>
<style scoped lang="scss">
.collect-error-wrapper {
  width: 300px;
  height: 100%;
  padding: 10px;
  background-color: #fff;
  .chart-wrapper {
    display: flex;
    height: 60px;
    gap: 10px;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    cursor: pointer;
    &:hover {
      background-color: var(--el-color-primary-light-9);
    }
  }
  .item-icon {
    background-color: #f2f2f2;
    border-radius: 10px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
  }
  .right {
    font-size: 14px;
    flex: 1;
    .desc {
      font-size: 12px;
    }
    span {
      color: #999;
      font-size: 12px;
    }
  }
}
</style>
